<template>
    <div class="product">
        <div class="product-item"  >
                    <div class="item-left">
                        <img class="img-auto" :src="pro.Img">
                    </div>
                    <div class="item-right">
                        <p class="item-name">{{pro.name}}</p>
                        <p class="item-desc">{{pro.desc}}</p>
                        <div class="price-add">
                            <div class="price">&yen;{{pro.price}}</div>
                            <div class="add">
                                <button type="button" class="btn">+</button>
                            </div>
                        </div>
                    </div>
                </div>
    </div>
</template>

<script>
    export default {
        name:"Product",
        props: {
      pro: {
        type: Object,
        defualt() {
          return {};
        }
      }
    },
    created(){
        console.log(this.pro);
    }
    }
</script>

<style lang="less" scoped>

</style>